<template>
  <!-- 子传父给value赋值选对应选项 -->
  <el-select
    :value="value"
    @change="changeChannel"
    clearable
    placeholder="请选择"
  >
    <el-option
      v-for="item in channels"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    ></el-option>
  </el-select>
</template>

<script>
export default {
  name: "my-channel",
  // 接收父传子传参value频道ID数据
  //
  props: ["value"],
  data() {
    return {
      //   频道id
      //   channelid: null,
      //   频道选项
      channels: []
    };
  },
  created() {
    //  获取频道
    this.getChannelOptions();
  },
  methods: {
    // 选择频道清空
    changeChannel(channelid) {
      //   if (this.channelid === "") this.channelid = null;
      //   if (channelid === "") channelid = null;
      //   将产生的频道id传给父组件
      //   this.$emit("input", channelid);
      this.$emit("input", channelid);
    },

    // 获取频道
    async getChannelOptions() {
      const {
        data: { data }
      } = await this.$http.get("/channels");
      this.channels = data.channels;
    }
  }
};
</script>

<style></style>
